﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自定义Ajax登录</title>
    <link href="Scripts/bootstrap/v4.6.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Styles/login.css" rel="stylesheet" />
    <script src="Scripts/jquery/v3.6.3/jquery.min.js"></script>
    <script src="Scripts/bootstrap/v4.6.2/js/bootstrap.min.js"></script>
    <script src="Scripts/login.js"></script>
    <script>
        function LoginClick() {
            let loginData = {
                LoginName: document.getElementById("txtLoginName").value,
                Password: document.getElementById("txtPassword").value,
                RoleId: document.getElementById("txtRoleId").value,
                UserName: document.getElementById("txtUserName").value,
                MobilePhone: document.getElementById("txtMobilePhone").value,
                RememberMe: document.getElementById("chkRememberMe").checked
            }
            UserLogin(loginData);
        }
    </script>
</head>
<body class="text-center">
    <div class="form-signin">
        <img class="mb-4" src="./Images/bootstrap-solid.svg" alt="" width="72" height="72" />
        <h1 class="h3 mb-3 font-weight-normal">自定义登录</h1>
        <div class="form-group row">
            <div class="col-label">
                <label for="txtLoginName" class="col-form-label">用户名：</label>
            </div>
            <div class="col">
                <input type="text" id="txtLoginName" name="LoginName" class="form-control" placeholder="用户名" required="required" value="test" autofocus="autofocus" />
            </div>
        </div>
        <div class="form-group row">
            <div class="col-label">
                <label for="txtPassword" class="col-form-label">密 码：</label>
            </div>
            <div class="col">
                <input type="password" id="txtPassword" name="Password" class="form-control" placeholder="密码" value="123456" required="required" />
            </div>
        </div>
        <div class="form-group row">
            <div class="col-label">
                <label for="txtRoleId" class="col-form-label">角色ID：</label>
            </div>
            <div class="col">
                <input type="number" id="txtRoleId" name="RoleId" class="form-control" placeholder="角色ID" value="101" required="required" />
            </div>
        </div>
        <div class="form-group row">
            <div class="col-label">
                <label for="txtUserName" class="col-form-label">真实姓名：</label>
            </div>
            <div class="col">
                <input type="text" id="txtUserName" name="UserName" class="form-control" placeholder="用户全名" value="张三丰" required="required" />
            </div>
        </div>
        <div class="form-group row">
            <div class="col-label">
                <label for="txtMobilePhone" class="col-form-label">手机号码：</label>
            </div>
            <div class="col">
                <input type="text" id="txtMobilePhone" name="MobilePhone" class="form-control" placeholder="手机号码" value="13188888888" required="required" />
            </div>
        </div>
        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" id="chkRememberMe" name="RememberMe" />
                记住我
            </label>
        </div>
        <div class="button-group">
            <button class="btn btn-lg btn-primary btn-block" type="button" onclick="LoginClick()">登 录</button>
        </div>
        <p class="mt-5 mb-3 text-muted">&copy; 2017-2023</p>
    </div>
</body>
</html>